<!DOCTYPE html  PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html style="height:100%;width:100%;padding:0px;margin:0px;">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		<script type="text/javascript" src="../public/js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="../public/js/json.js"></script>
	    <script src="json.js"></script>
	    
	    <style>
	     .hover{
		     background-color: #EEE;
		 }
		 .active{
				background-color: #F2BA29;
			}
	   </style>
	 <script>
	     var eventInfo = {};
	     var currentId;
	     var background = callJava(JSON.stringify({event:"getBackground"}));
	     /**java端調用方法设置样式数据**/
	     function init(currentValue,data,cusValue,commonCls){
	   
	    	  data = eval("("+data+")");
	    	  
	    	  //构建风格选择界面
	    	  var htmlBuf = [];
	    	  htmlBuf.push("<tr style=''><td style='border-bottom:0px solid #ccc;'>风格选择</td></tr>");
	    	  for(var i=0;i<data.length;i+=1){
	    	    var dataItem = data[i];
	    	    if(dataItem){
	    	        var checked = dataItem.checked||""
	    	        htmlBuf.push("<tr><td><input "+checked+" type='radio' name='styleClass' _value='"+dataItem.name+"' id='"+dataItem.name+"'/><label for='"+dataItem.name+"'>&nbsp;"+dataItem.name+"&nbsp;("+dataItem.label+")</label></tr>");
	    	        var childItems = dataItem.items;
	    	        if(childItems){
	    	           for(var j = 0;j<childItems.length;j+=1){
	    	               var childItem = childItems[j];
	    	               if(childItem){
	    	                   var checked = childItem.checked||""
	    	                   var id = dataItem.name+"-"+childItem.name;
	    	                   htmlBuf.push("<tr><td style='padding-left:20px;'><input "+checked+" type='checkbox' disabled='disabled' _value='"+childItem.name+"' isDefault='"+childItem.isDefault+"' parentId='"+dataItem.name+"' name='classItem' id='"+id+"'/><label for='"+id+"'>&nbsp;"+childItem.name+"&nbsp;("+childItem.label+")</label></tr>");
	    	               }
	    	           }
	    	        }
	    	         htmlBuf.push("<tr style='height:12px;font-size:0'><td>&nbsp;</td></tr>");
	    	    }
	    	  }
	    	  if(htmlBuf.length>0){
	    	    htmlBuf.push("<tr><td><input type='radio' name='styleClass' _value='' id='noStyle'/><label for='noStyle'>&nbsp;无</label></tr>");
	    	    
	    	  }
	    	  if(commonCls){
	    		  var clsItems = commonCls.split(",");
	    		  htmlBuf.push("<tr><td style='border-top:1px solid  #ccc;padding-top:5px;'>公共样式</tr>");
	    		  htmlBuf.push("<tr><td style='padding-left:20px;'>");
	    		  var values = currentValue.split(" ");  
	    		  for(var i = 0;i<clsItems.length;i+=1){
	    			  var clsItem = clsItems[i].split(":");
	    			  if(clsItem.length==1){
	    				  clsItem = [clsItem[0],clsItem[0]];
	    			  }
	    			  var id = clsItem[0];
	    			  var checked = (values && $.inArray(clsItem[0],values)!=-1)?"checked='checked'":"";
	    			  htmlBuf.push("<div style='float:left;width:33%;'><input type='checkbox' "+checked+"  _value='"+clsItem[0]+"'  name='commonClsItem' id='"+id+"'/><label for='"+id+"'>&nbsp;&nbsp;"+clsItem[0]+"</label></div>");
	    		  }
	    		  htmlBuf.push("</td></tr>");
	    	  }
	    	  
	    	  $("#dataDiv").html("<table style='font-size:13px;width:100%;'>"+htmlBuf.join("")+"</table>");
              //初始化自定义class
              $("#cusClass").val(cusValue);
       

	    	  //风格选择事件
	    	  $("*[name='styleClass']").bind("click",function(event){
	    	     var pId = $(this).attr("id");
	    	     if(pId == currentId){
	    	        return;
	    	     }
	    	     currentId = pId;
	    	     $("label").removeClass("active");
	    	     $("label[for='"+currentId+"']").addClass("active");
	    	     
	    	     $("input[name='classItem']").each(function(){
	    	         if($(this).attr("parentId") != pId){
	    	            $(this).removeAttr("checked").attr("disabled","disabled");
	    	         }else{
	    	           $(this).removeAttr("disabled"); 
	    	           if($(this).attr("isDefault") == 'true'){
	    	               $(this).attr("checked","checked");
	    	           }
	    	         }
	    	     });
	    	  });
	    	  
	    	  $("label").hover(
				  function () {
				    $(this).addClass("hover");
				  },
				  function () {
				    $(this).removeClass("hover");
				  }
				);
			
	    	  currentId = $("input[name='styleClass']:checked").attr("id");  
	    	  $("input[parentId='"+currentId+"']").removeAttr("disabled");
	    	  $("label[for='"+currentId+"']").addClass("active");
 
	     }
	     
	     function reload(){ 
	    	 window.location.reload()
	     }
          
	     /**java端调用的方法获取数据**/
	     function getEventInfo(){
	    	return JSON.stringify(eventInfo);
	     }
	     
	     /**java端点击确定后调用的方法**/
	     function getValue(){ 
	         eventInfo.event = "getValue"; 
	         eventInfo.data = ""; 
	        var buf = [];
	        $("input:checked").each(function(){
	            buf.push($(this).attr("_value"));
	        });
	        var cusV = $("#cusClass").val();
	        if(cusV){
	           buf.push(cusV);
	        }
	         eventInfo.data = buf.join(" "); 
	         callJava(JSON.stringify(eventInfo));
	        // document.fireEvent('onafterupdate');//固定值
	     }
	     
	     /**页面加载完调用的方法**/
	     function afterLoad(){
	    	 document.body.style.background = background;
	         eventInfo.event = "afterInit";
	         //document.fireEvent('onafterupdate');
	         callJava(JSON.stringify(eventInfo));
			document.oncontextmenu = function() {
		
				return false;
			}
	     }
	 </script>

	</head>
	<body onload="afterLoad()"style="padding:0;border:0;overflow:auto;cursor:default;margin:0;width:100%;height:100%;background:#ECE9D"> 
	
	   <div id="dataDiv">
	   
	   </div>

	   <table style="width:100%;font-size:13px;bottom:5px;">
	       <tr><td style='border-top:1px solid  #ccc;padding-top:5px;'>自定义</td></tr>
	       <tr><td>
	         <input style="border:1px solid #ccc;width:99%;height:20px;font-size:12px;" id="cusClass"></input>
	       </td></tr>
	   </table>  
	</body>
</html>